import React, {Component} from "react";
import {Layout} from "antd";
import "./assets/css/common/index.less";
import SiderCustom from "./components/SiderCustom";
import HeaderCustom from "./components/HeaderCustom";
import {receiveData} from "./action";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
const {Content, Footer} = Layout;

class App extends Component {
    state = {
        collapsed: false
    };

    componentDidMount() {
        if (process.env.NODE_ENV == 'development') {
            window.onbeforeunload = function (event) {
                alert('leave');
                event.returnValue = "数据还未保存,确定离开当前页面吗？";
            };
            window.addEventListener('keydown', this.onKeyDown)
        }
    }

    componentWillMount() {
        const {receiveData} = this.props;
        const user = JSON.parse(localStorage.getItem("user"));
        user && receiveData(user, "auth");
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed
        });
    };

    render() {
        const {auth, router} = this.props;
        return (
            <Layout className="ant-layout-has-sider">
                <SiderCustom
                    path={this.props.location.pathname}
                    collapsed={this.state.collapsed}
                />
                <Layout>
                    <HeaderCustom
                        toggle={this.toggle}
                        user={auth.data || {}}
                        router={router}
                    />
                    <Content style={{padding: "0 16px", overflow: "initial"}}>
                        {this.props.children}
                    </Content>
                    <Footer style={{textAlign: "center"}}>
                        Wakkaa 后台管理
                    </Footer>
                </Layout>
            </Layout>
        );
    }
}

const mapStateToProps = state => {
    const {auth = {data: {}}} = state.httpData;
    return {auth};
};
const mapDispatchToProps = dispatch => ({
    receiveData: bindActionCreators(receiveData, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
